<template>
  <el-card>
    <div style="display: flex; justify-content: space-between">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="借书证号" prop="card_id">
          <el-input
            v-model.trim="queryParams.card_id"
            placeholder="请输入借书证号"
            clearable
            @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item label="借阅人" prop="user_name">
          <el-input
            v-model.trim="queryParams.user_name"
            placeholder="请输入借阅人"
            clearable
            @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList()"> 查询 </el-button>
        </el-form-item>
      </el-form>
      <el-button type="info" @click="exportExcel">
        导出excel
      </el-button>
    </div>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column prop="id" label="类型编号" align="center" />
      <el-table-column prop="user_name" label="借阅人" align="center" />
      <el-table-column prop="card_id" label="借书证号" align="center" />
      <el-table-column prop="phone" label="联系电话" align="center" />
      <el-table-column prop="book_name" label="图书名称" align="center" />
      <el-table-column prop="category_name" label="图书类型" align="center" />
      <el-table-column
        prop="status"
        label="借阅状态"
        width="120"
        align="center"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.status == 0"> 再借 </el-tag>
          <el-tag v-if="scope.row.status == 1"> 不可借 </el-tag>
          <el-tag type="error" v-if="scope.row.status == 2"> 逾期 </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="borrow_date" label="借阅时间" align="center">
        <template #default="scope">
          {{ dateFormat(scope.row.borrow_date) }}
        </template>
      </el-table-column>
      <el-table-column prop="return_date" label="归还时间" align="center">
        <template #default="scope">
          {{ dateFormat(scope.row.return_date) }}
        </template>
      </el-table-column>
      <el-table-column prop="actual_return_date" label="实际归还时间" align="center">
        <template #default="scope">
          {{ dateFormat(scope.row.actual_return_date) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="200">
        <template #default="scope">
          <el-button text type="primary" @click="queryDetailFun(scope.row)">
            查看详情
          </el-button>
          <el-button type="danger" text @click="handleDel(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      background
      layout="sizes, prev, pager, next"
      :total="total"
      v-model:current-page="page.pageIndex"
      v-model:page-size="page.pageSize"
      :page-sizes="[6, 10, 20, 50]"
      @current-change="changePage"
      @size-change="changeSize"
    />
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getBorrowList, delBorrowApi, exportBorrowExcel } from "@/api/borrow";
import { dateFormat } from "@/utils/filters";
const queryParams = ref({ card_id: '', user_name: "" });
const page = ref({
  pageIndex: 1,
  pageSize: 10,
});
const total = ref<number>(0);
const dataList = ref<any[]>([]);
const changePage = (index: number): void => {
  page.value.pageIndex = index;
  getList();
};
const changeSize = (size: number): void => {
  page.value.pageSize = size;
  getList();
};
// 获取用户列表
const getList = (): void => {
  const params = Object.assign(page.value, queryParams.value);
  getBorrowList(params).then((res: any) => {
    dataList.value = res.list;
    total.value = res.total;
  });
};
const exportExcel = (): void => {
  const params = Object.assign(page.value, queryParams.value);
  exportBorrowExcel(params).then((_res: any) => {
    const link = document.createElement("a");
    link.download = "借阅记录-" + Date.now() + 'xlsx';
    link.target = "_blank";
    link.href = URL.createObjectURL(_res);
    link.click();
    link.remove();
    URL.revokeObjectURL(_res);
  })
}
// 查看详情
const queryDetailFun = (): void => {

}
// 删除用户
const handleDel = (id: number): void => {
  delBorrowApi(id).then((_res: any) => {
    getList();
  });
};
onMounted(async () => {
  getList();
});
</script>
<style scoped lang="scss"></style>
